<template>
    <div class="choose-movie">
        <div class="choose-box flex-start-row">
            <!-- 选择日期 -->
            <el-date-picker v-model="current" style="margin-right: 20px" type="date" placeholder="Pick a day"
                @change="changeTime"
                size="large" :disabled-date="disabledDate" />
            <!-- 地区 -->
            <el-select v-model="areaId" class="condition-select" placeholder="请选择地区" size="large">
                <el-option v-for="item in AreaList" :label="item.areaName" :value="item.areaId" />
            </el-select>
            <!-- 类型 -->
            <el-select v-model="typeId" class="condition-select" placeholder="请选择电影类型" size="large">
                <el-option v-for="item in allTypes" :label="item.type" :value="item.typeId" />
            </el-select>
            <!-- 电影 -->
            <el-select v-model="movieId" class="condition-select" placeholder="请选择电影" size="large">
                <el-option v-for="item in movieList" :label="item.movieName" :value="item.movieId" />
            </el-select>
            <el-button type="primary" style="width: 200px;height: 40px;" @click="queryMovie">查询</el-button>
        </div>
        <div class="result-bg center">
            <el-carousel direction="vertical" :autoplay="false" class="choose-carousel" @change="switchPage"
                v-if="conditionMovieList.length > 0">
                <el-carousel-item v-for="item in totalPage">
                    <ChooseItem v-for="(item, index) in conditionMovieList" :direction="index % 2 == 0 ? 'left' : 'right'"
                        :movie-info="item">
                    </ChooseItem>
                </el-carousel-item>
            </el-carousel>
            <div v-else class="result-placeholder center">暂无数据</div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ChooseItem from './ChooseItem.vue'
import { getAreaByCity } from '../../../../api/region'
import { getAllMovieOrderByView, getMovieByCondition } from '../../../../api/movie'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

let current = ref(dayjs().format("YYYY-MM-DD"))
let areaId = ref(0)
let movieId = ref(0)
let currentPage = ref(0)
let typeId = ref(0)

let allTypes:IType[] = JSON.parse(window.sessionStorage.getItem("allTypes")!)
allTypes.unshift({
    typeId: 0,
    type: '暂无',
    pinyin: '',
})

interface IArea {
    areaId: number
    areaName: string
}

interface IConditionMovie {
    movieCover: string
    movieDesc: string
    movieId: number
    movieName: string
    movieScore: number
    movieScoreNum: number
    movieTypeId: number
    movieView: number
    movieDuring: number
    cinemaName?: string
    cinemaAddress?: string
    playDate?: string
    startTime?: number
    endTime?: number
}

interface IType {
    typeId: number;
    type: string;
    pinyin: string;
}

const cityname = JSON.parse(window.sessionStorage.getItem("location")!).cityname
let timeChanged = ref(false)
let AreaList = ref<IArea[]>()


let movieList = ref<IConditionMovie[]>([])
let conditionMovieList = ref<IConditionMovie[]>([])
let totalPage = ref(0)
// 更改时间
const changeTime = () => {
    timeChanged.value = true
}
// 获得地区
getAreaByCity({ cityname: cityname }).then((res: any) => {
    if (res.code == 200) {
        AreaList.value = res.data
        AreaList.value?.unshift({
            areaId: 0,
            areaName: '暂无'
        })
        console.log("条件查询 -> 获得地区信息", res.data);
    } else {
        ElMessage.error("获取地区失败")
    }
})
// 获得本地电影
getAllMovieOrderByView({ cityname: cityname }).then((res: any) => {
    if (res.code == 200) {
        movieList.value = res.data
        movieList.value?.unshift({
            movieCover: '',
            movieDesc: '',
            movieId: 0,
            movieName: '暂无',  
            movieScore: 0,
            movieScoreNum: 0,
            movieTypeId: 0,
            movieView: 0,
            movieDuring: 0,
            cinemaName: '',
            cinemaAddress: '',
            playDate: '',
            startTime: 0,
            endTime: 0
        })
        console.log("条件查询 -> 获得本地电影", res.data);
    } else {
        ElMessage.error("获得本地电影失败")
    }
})


const disabledDate = (time: Date) => {
    //禁止选择今天以前的时间和七天以后的
    return time.getTime() - Date.now() > 6 * 24 * 60 * 60 * 1000 || time.getTime() - Date.now() <= (-1) * 24 * 60 * 60 * 1000;
}

const queryMovie = () => {
    currentPage.value = 0
    // console.log("测试->querymovie",movieInfo.value,current.value,areaInfo.value);  
    getMovieByCondition({ 
        regionId: areaId.value, 
        date: timeChanged.value == true? dayjs(current.value).format("YYYY-MM-DD") : current.value,
        movieId: movieId.value, 
        currentPage: currentPage.value, 
        typeId: typeId.value
    }).then((res: any) => {
        if (res.code == 200) {
            // debugger
            // 返回本次查询的结果
            conditionMovieList.value = res.data.data
            totalPage.value = res.data.totalPage
            console.log("条件查询 -> 获得查询结果", res.data);
        } else {
            ElMessage.error("获得本地电影失败")
        }
    })
}


const switchPage = (newVal: number, oldVal: number) => {
    currentPage.value = newVal
    getMovieByCondition({ 
        regionId: areaId.value, 
        date: timeChanged.value == true? dayjs(current.value).format("YYYY-MM-DD") : current.value,
        movieId: movieId.value, 
        currentPage: currentPage.value, 
        typeId: typeId.value
    }).then((res: any) => {
        if (res.code == 200) {
            // debugger
            // 返回本次查询的结果
            conditionMovieList.value = res.data.data
            totalPage.value = res.data.totalPage
            console.log("条件查询 -> 获得查询结果", res.data);
        } else {
            ElMessage.error("获得本地电影失败")
        }
    })
}
</script>

<style lang="less" scoped>
// 该变量关联MyHeader组件
@leftAndRight: 100px;
@headerHeight: 82.8px;
@chooseBar: 70px;

deep .el-input__wrapper {
    background-color: rgb(236, 236, 236);
}

.choose-carousel {
    width: 100%;
    height: 100%;

}

/deep/ .el-carousel__container {
    height: 100%;

}

/deep/ .el-carousel__item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.result-bg {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to left bottom, #b2b9be, #2f4052);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    z-index: 10;
    flex-direction: column;
    backdrop-filter: blur(25px);

    .result-placeholder {
        width: 100%;
        height: 100%;
        font-size: 22px;
        font-weight: bold;
    }
}

.condition-select {
    margin-right: 20px;
}

.condition-select:last-of-type {
    margin-right: 270px;
}

.choose-movie {
    width: 100%;
    height: calc(100vh - @chooseBar - @headerHeight);
    background-image: linear-gradient(to left bottom, #b2b9be, #2f4052);
    color: white;
    position: relative;

    .choose-box {
        position: sticky;
        top: @headerHeight;
        z-index: 12;
        width: 100%;
        padding: 15px @leftAndRight;
        height: 70px;
        background-size: cover;
        background-image: linear-gradient(0deg, #4e5c6c, black);
        border-top: 2px solid rgb(0 0 0 / 65%);
    }
}
</style>